<template>
  <view v-if="Object.keys(editDetail).length">
    <uni-popup id="popup3" ref="popup3" :type="type" :animation="true" :zIndexs="999" @change="change">
      <view class="popup-edit">
        <!-- 修改的动作 标题 图标 关闭按钮 -->
        <view class="u-f relative edit-content">
          <image src="../../static/b10.png" />
          <view style="margin-left: 40rpx;">
            <view style="font-weight: 600;font-size: 32rpx;">{{editDetail.name}}</view>
            <view style="font-size: 22rpx;color: #aaa;" class="edit-titles-text">
              <text>{{editDetail.gropNum}}组</text>
              <text>{{editDetail.numOfGroup}}次</text>
              <text v-if="editDetail.devicesIdArray.length">{{editDetail.devicesIdArray[0]}}</text>
              <text v-if="editDetail.obstruction">{{editDetail.obstruction}}KG</text>
              <text v-if="editDetail.restOfGroup">{{editDetail.restOfGroup}}秒</text>
            </view>
          </view>
          <view class="cuIcon-close absolute" style="font-size: 40rpx;font-weight: 600; right: 0;top: 0;" @click="$refs.popup3.close()"></view>
        </view>
        <!-- 组数等 -->
        <view class="edit-content border-top">
          <view>组数</view>
          <view class="edit-input u-f-ajc"><input type="number" v-model="editDetail.gropNum" /><text>组</text></view>
        </view>
        <view class="edit-content border-top">
          <view>每组次数/时间</view>
          <view class="edit-input u-f-ajc"><input type="number" v-model="editDetail.numOfGroup" /><text>次</text></view>
        </view>
        <view class="edit-content border-top">
          <view>器械</view>
          <view class="edit-input u-f-ajc" style="padding: 6rpx 40rpx;" @click="$refs.qixie.toggle()">{{editDetail.devicesIdArray[0] || '无'}}</view>
        </view>

        <qiXie ref="qixie" :arrs="devicesIdArray" @emitIndex="emitIndex" />

        <view class="edit-content border-top">
          <view>阻力</view>
          <view class="edit-input u-f-ajc"><input type="number" v-model="editDetail.obstruction" /><text>KG</text></view>
        </view>
        <view class="edit-content border-top">
          <view>组间休息</view>
          <view class="edit-input u-f-ajc"><input type="number" v-model="editDetail.restOfGroup" /><text>秒</text></view>
        </view>
        <view class="eidt-button u-f-ajc" @click="confirm">确认</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import uniPopup from "../uni-popup/uni-popup.vue"
  import qiXie from "./qixie.vue"
  export default {
    components: {
      uniPopup,
      qiXie,
    },
    props: {
      item: {
        type: Object,
        default () {
          return {}
        }
      },
      index: {
        type: Number,
        default () {
          return 0
        }
      },
      names: String,
    },
    watch: {
      item(newVal, oldVal) {
        this.editDetail = !newVal ? {} : newVal
        console.log('监听变化1', newVal, oldVal)
      },
      index(newVal, oldVal) {
        this.editDetailIndex = !newVal ? {} : newVal
        console.log('监听变化2', newVal, oldVal)
      },
    },

    data() {
      return {
        type: 'bottom',
        editDetail: {},
        editDetailIndex: 0,
        devicesIdArray: [],
        devicesIdArrayActive: -1,
      };
    },
    created() {
      this.getDevicesId();
    },
    methods: {
      modelVal(e, names) {
        this.editDetail[names] = e.detail.value
        console.log(this.editDetail[names])
      },
      change(e) {
        console.log('popup ' + e.type + ' 状态', e.show)
        if (e.show) {
          console.log('kai')
          console.log(this.item, this.index)
          console.log(this.editDetail, this.editDetailIndex)
          // this.editDetail = {}
          // this.editDetailIndex = 0
        }
      },
      async getDevicesId() {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getInstrumentList",
          data: {
            bId: 1
          }
        })
        this.devicesIdArray = datas;
      },
      emitIndex(e) {
        this.devicesIdArrayActive = e
        this.editDetail.devicesIdArray = [this.devicesIdArray[this.devicesIdArrayActive].name]
      },
      toggle3(type) {
        console.log('使用修改弹出框组件里的toggle3方法')
        this.type = type
        this.$nextTick(()=>{
          this.$refs.popup3.open()
        })
      },
      confirm() {
        let obj = {
          editDetail: this.editDetail,
          editDetailIndex: this.editDetailIndex,
          names: this.names,
        }
        this.$refs.popup3.close()
        this.$emit('editPopups', obj)
      }
    }
  }
</script>

<style lang="scss">
  .popup-edit {
    width: 100vw;
    background-color: #E8F4D9;
    padding: 30rpx;
  }

  .edit-content {
    padding: 20rpx 0;

    image {
      width: 150rpx;
      height: 100rpx;
    }
  }

  .edit-titles-text {
    text {
      padding: 0 4rpx;
      border-right: 1px solid;
    }

    >text:last-of-type {
      padding: 0 0 0 4rpx;
      border-right: none;
    }
  }

  .border-top {
    border-top: 1px solid #eee;

    .edit-input {
      margin: 4rpx 0;
      padding: 6rpx 20rpx;
      display: inline-block;
      font-size: 28rpx !important;
      color: $uni-color-zhuti;
      border: 1px solid $uni-color-zhuti;
      border-radius: 10rpx;

      input {
        display: inline-table;
        width: 40rpx;
        text-align: right;
        padding-right: 6rpx;
      }
    }

    input:focus {
      font-size: 28rpx !important;
    }
  }

  .eidt-button {
    width: 90%;
    margin: 20rpx auto 0;
    height: 90rpx;
    background-color: $uni-color-zhuti;
    border-radius: 10rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }
</style>
